/**
 * <div id="app">hello,{{msg}}</div>
 *
 * render(){   _c 用来解析标签
 *     return _c('div',{id.app},_v('hell' + _s(msg)),_c)
 * }
 */

const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g; // {{}}


// 处理子集
function genChildren(el) {
    let children = el.children
    if (children) {

        return children.map(child => gen(child)).join(',')
    }
}

// 子集每一项
function gen(node) { // 1 元素  div   2 3

    if (node.type === 1) {
        return generate(node)
    } else { // 文本   （1）只是文本 hello   {{}}
        let text = node.text
        if (!defaultTagRE.test(text)) {
            return `_v(${JSON.stringify(text)})`
        }
        // 带有{{}} 处理插值表达式
        let tokens = []
        let lastIndex = defaultTagRE.lastIndex = 0    // 全局使用  处理多个插值  {{msg}},{{name}}
        let match
        while (match = defaultTagRE.exec(text)) {

            let index = match.index
            if (index > lastIndex) {
                tokens.push(JSON.stringify(text.slice(lastIndex, index))) // 内容
            }
            // 添加插值表达式 {{}}
            tokens.push(`_s(${match[1].trim()})`)
            lastIndex = index + match[0].length
        }
        // 还有内容
        if (lastIndex < text.length) {
            tokens.push(JSON.stringify(text.slice(lastIndex)))
        }

        return `_v(${tokens.join("+")})`
    }
}

// 处理内联属性
function genProps(attrs) {
    let str = ''
    // 对象
    for (let i = 0; i < attrs.length; i++) {
        let attr = attrs[i] // {name:"style",value: "color:red;font-size:20px"} 进行拆分组合

        if (attr.name === 'style') { // 如果是行内样式
            let obj = {}
            attr.value.split(';').forEach(item => {
                let [key, val] = item.split(':')  // color  red
                obj[key] = val
            })
            attr.value = obj
        }
        // 拼接
        str += `${attr.name}:${JSON.stringify(attr.value)},`

    }
    return `{${str.slice(0, -1)}}`
}

// ast转render函数
export function generate(el) {

    // 本质： 拼接字符串
    // 注意属性 {id:app,style:{color:red,fo}}
    let children = genChildren(el) // 返回子集
    return `_c('${el.tag}',${el.attrs.length ? `${genProps(el.attrs)}` : 'undefined'}${children ? `,${children}` : ''})`

}
